<template>
    <div class="register-container">
      <article class="header">
        <header>
          <span class="login">
            <em class="bold">已有账号？</em>
            <a href="/login">
              <el-button type="primary" size="mini">登录</el-button>
            </a>
          </span>
        </header>
      </article>
      <section>
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          autocomplete="off"
          :hide-required-asterisk="true"
          size="medium"
        >
          <div style="padding-top: 10px">
            <el-form-item label="姓名" prop="name">
              <el-col :span="10">
                <el-input v-model="ruleForm.name" type="text" 
                placeholder="输入您的真实姓名"/>
              </el-col>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-col :span="10">
                <el-input v-model="ruleForm.phone" type="text" 
                placeholder="输入您的手机号"/>
              </el-col>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-col :span="10">
                <el-input v-model="emailfrom.email" type="text" 
                placeholder="输入您能够接收邮件的邮箱"/>
              </el-col>
              <el-col :span="10">
                <el-row>
                  <el-button
                    type="primary"
                    @click="sendCaptcha"
                    :disabled="disable"
                    >
                    <span v-show="show">获取验证码</span>
                    <span v-show="!show" class="count">{{count}} s</span>
                  </el-button>
                </el-row>
              </el-col>
            </el-form-item>
            <el-form-item label="邮箱验证码" prop="captchacode">
              <el-col :span="10">
                <el-input v-model="ruleForm.captchacode" type="text" 
                placeholder="输入在您邮箱中的验证码"/>
              </el-col>
            </el-form-item>
            <el-form-item label="账号" prop="username">
              <el-col :span="10">
                <el-input v-model="ruleForm.username" type="text" 
                placeholder="输入您的账号(学号),长度不小于5位"/>
              </el-col>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-col :span="10">
                <el-input v-model="ruleForm.password" type="password" 
                placeholder="密码长度不小于5位"/>
              </el-col>
            </el-form-item>
            <el-form-item label="确认密码" prop="cpassword">
              <el-col :span="10">
                <el-input v-model="ruleForm.cpassword" type="password" />
              </el-col>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                style="width: 40%"
                @click="register"
              >注册</el-button>
            </el-form-item>
          </div>
        </el-form>
      </section>
    </div>
  </template>
  
  <script>
  import api from '@/api/register'
  export default {
    name: 'Register',
    data() {
      return {
        ruleForm: {
          name:'',
          phone: '',
          username: '',
          password: '',
          cpassword: '',
          email: '',
          captchacode:'',
        },
        emailfrom:{email:''},
        //验证码相关三个数值
        disable:false,
        show: true,
        count: "", // 初始化次数
        timer: null,

        rules: {
          name: [{
            required: true,
            message: '姓名不能为空',
            trigger: 'blur'
          },{
            validator: (rule, value, callback) => {
              const reg =/^[\u4e00-\u9fa5]{2,4}$/;    //2-4个中文字符正则;
              if(value==''||value==undefined||value==null){
                callback();
              }else {
                if ((!reg.test(value)) && value != '') {
                  callback(new Error('请输入您的真实姓名'));
                } else {
                  callback();
                }
              }
            },
            trigger: 'blur'
          }],
          phone: [{
            required: true,
            message: '手机号不能为空',
            trigger: 'blur'
          },{
            validator: (rule, value, callback) => {
              const reg =/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
              if(value==''||value==undefined||value==null){
                callback();
              }else {
                if ((!reg.test(value)) && value != '') {
                  callback(new Error('请输入正确的电话号码'));
                } else {
                  callback();
                }
              }
            },
            trigger: 'blur'
          }],
          username: [{
            required: true,
            message: '账号不能为空',
            trigger: 'blur'
          },{
            validator: (rule, value, callback) => {
              if (value.length < 5) {
                callback(new Error('账号格式有误（长度少于五位）'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          },{
            validator: (rule, value, callback) => {
              if (value.length < 5) {
                callback(new Error('密码有误（密码长度少于五位）'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }],
          cpassword: [{
            required: true,
            message: '确认密码',
            trigger: 'blur'
          }, {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入密码'))
              } else if (value !== this.ruleForm.password) {
                callback(new Error('两次输入密码不一致'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }]
  
        }
      }
    },
    methods: {
      // 用户注册
      register() {
        this.ruleForm.email=this.emailfrom.email
        api.register(this.ruleForm).then(res => {
          this.$message({
            showClose: true,
            message: '注册成功，正在跳转到登录界面...',
            type: 'success'
          })
          setTimeout(() => {
             this.$router.push('/')
          }, 2000)
        })
      },
      // 验证邮箱
      sendCaptcha() {
          if (this.checkemail() == false) {
            return false;
          } else {
            const TIME_COUNT = 60; //更改倒计时时间
            this.disable = true;
            api.getCaptcha(this.emailfrom).then(resp=>{
              console.log(resp.data)
            })
            if (!this.timer) {
              this.count = TIME_COUNT;
              this.show = false;
              this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
              this.show = true;
              clearInterval(this.timer); // 清除定时器
              this.disable = false;
              this.timer = null;
              }
            }, 1000);
          }
        }
      },
      checkemail() {
        let email = this.emailfrom.email;
        if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(email)) {
          this.$message.error("请填写正确的邮箱号");
          return false;
        }
      }
    },  
   
}
  </script>
  
  <style lang="scss">
  $bg: #4b5157;
  $light_gray: #fff;
  $cursor: #fff;
  
  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
    .register-container .el-input input {
      color: $cursor;
    }
  }
  
  /* reset element-ui css */
  .register-container {
    width: 100%;
    height: 100%;
    background-image: url("../../assets/background/register.png");
    background-size: cover;
    background-position: center;
    position: relative;
    .el-input {
      display: inline-block;
      height: 47px;
      width: 95%;
  
      input {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        -webkit-appearance: none;
        padding: 12px 5px 12px 15px;
        color: $light_gray;
        height: 47px;
        caret-color: $cursor;
  
        &:-webkit-autofill {
          box-shadow: 0 0 0px 1000px $bg inset !important;
          -webkit-text-fill-color: $cursor !important;
        }
      }
    }
  
    .el-form-item {
      label {
        font-style: normal;
        font-size: 12px;
        color: $light_gray;
      }
    }
  }
  </style>
  
  <style lang="scss" scoped>
  $bg: #2d3a4b;
  $dark_gray: #889aa4;
  $light_gray: #eee;
  
  .register-container {
    min-height: 100%;
    width: 100%;
    background-color: $bg;
    overflow: hidden;
  
    .header {
      // border-bottom: 2px solid rgb(235, 232, 232);
      // min-width: 980px;
      // color: #666;
  
      header {
        margin: 0 auto;
        padding: 10px 0;
        width: 980px;
  
        .login {
          float: right;
        }
  
        .bold {
          font-style: normal;
          color: $light_gray;
        }
      }
    }
  
    > section {
      margin: 0 auto 30px;
      padding-top: 30px;
      width: 980px;
      min-height: 300px;
      padding-right: 100px;
      box-sizing: border-box;
  
      .status {
        font-size: 12px;
        margin-left: 20px;
        color: #e6a23c;
      }
  
      .error {
        color: red;
      }
    }
  
    .tips {
      float: right;
      font-size: 14px;
      color: #fff;
      margin-bottom: 10px;
  
      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }
  }
  </style>
  
  <style scoped>
  /* 修改验证器样式 */
  ::v-deep .el-form-item.is-error .el-input__inner {
    border-color: #889aa4;
  }
  ::v-deep .el-form-item.is-error .el-input__validateIcon {
    color: #889aa4;
  }
  ::v-deep .el-form-item__error {
    color: #e6a23c;
  }
  </style>